<template>
	<view class="back-banner">
		<view class="header">
			<view class="userinfo">
				<view class="face">
					<image :src="mypng"></image>
				</view>
				<view class="info">
					<view class="username">编号：{{userinfo.id }}</view>
					<view class="username">姓名：{{userinfo.name }}</view>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<!-- 扫码预览 -->
			<view style="height: 140rpx;">
				<view class="icon-ym icon-ym-scanCode postname" style="color: #FFFFFF;font-size: 55rpx;" @tap="scanning()"></view>
			</view>
			<!-- #endif -->
		</view>
		
		<view class="userinfo_center">
			<view class="userstaff ">
				<!-- <view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-gongsi"></text>学院</view>
						<view class="postname">{{userinfo.organizeName }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-bumen"></text>部门</view>
						<view class="postname">{{userinfo.departmentName }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-gangwei"></text>职位</view>
						<view class="postname">{{userinfo.positionName }}</view>
					</view>
				</view> -->
				<view class="staff">
					<view class="staffinfo">
						<view class="staffname"><text class="iconfont icon-ym-jaose"></text>{{userinfo.roleName }}</view>
						<!-- <view class="postname">{{userinfo.roleName }}</view> -->
					</view>
				</view>
			</view>
			
			<!-- <view class="userstaff ">
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-xingbie"></text>性别</view>
						<view class="postname">{{userinfo.gender}}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-shengri"></text>生日</view>
						<view class="postname">{{userinfo.birthday}}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-shouji"></text>手机</view>
						<view class="postname">{{userinfo.mobilePhone  }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo">
						<view class="staffname"><text class="iconfont icon-youxiang1"></text>邮箱</view>
						<view class="postname">{{userinfo.email }}</view>
					</view>
				</view>
			</view> -->
			
			<view class="userstaff">
				<!-- <view class="staff" @tap="contactUs">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-ym-lianxiwomen"></text><label>联系我们</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="staff" @tap="aboutUs">
					<view class="staffinfo" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-ym-yingyongjieshao"></text><label>应用介绍</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view> -->
				
				<view class="staff" v-for="(item,index) in dogetmenu()" :key="index" @tap="deRoute(item)">
					<view class="staffinfo" hover-class="uni-list-cell-hover">
						<view class="staffname"><text :class="item.F_Icon"></text><label>{{item.F_FullName}}</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				
				<!-- #ifdef APP-PLUS -->
				<!-- <view class="staff" @tap="accountSecurity">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-zhanghaoanquan"></text><label>账号安全</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view> -->
				<!-- #endif -->
			</view>
			<view class="exit-btn">
				<view class="btn-exit" @click="defaultlogout" hover-class="uni-list-cell-hover">退出登录</view>
			</view>
		</view>
		<!-- <Tabar ref="Tabar"></Tabar> -->
	</view>
</template>

<script>
	
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'
	import uniPopup from '../extendModule/uni-popup/uni-popup.vue'
	// import Tabar from "@/components/Tabar/Tabar.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			uniPopup,
			// Tabar
		},
		data() {
			return {
				userinfo: {
					id:"",
					name:"",
					roleName:""
				},
				cachesize: '',
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				mypng:'../../../static/image/001.png',
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onLoad() {
			console.log('我的-用户:'+uni.getStorageSync('userid'));
			
			var accinfo=uni.getStorageSync('user_data')
			//console.log(accinfo);
			this.userinfo.id=accinfo.id;
			this.userinfo.name=accinfo.leader;
			this.userinfo.roleName=accinfo.name;
			
			//https://blog.csdn.net/BillKu/article/details/145268348
			this.mypng='../../../static/image/'+accinfo.id+'.png';
			//console.log(this.mypng);
		},
		
		methods: {
			 
			  /* 根据不同用户返回不同菜单 */
			  dogetmenu(){
				//vue 模拟后台返回json数组，赋在页面数据json的列表中
				//https://www.cnblogs.com/hailexuexi/p/14930809.html
				var jsonArrStr ='';
				
				var userid=uni.getStorageSync('userid');
				console.log('研学-用户:'+userid);
				
				/* 政府 */
				if(userid=="1001"){
				  jsonArrStr=jsonArrStr+'[{"F_FullName":"基本信息","F_Icon":"iconfont icon-ym icon-ym-header-userInfo","F_UrlAddress":"/pages/users/account/register-info/register-web"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"待审课程","F_Icon":"iconfont ym-custom ym-custom-wunderlist","F_UrlAddress":"/pages/apply/apply/lims020103/6index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学评价","F_Icon":"iconfont icon-ym icon-ym-generator-nature","F_UrlAddress":"/pages/apply/apply/lims020202/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学投诉","F_Icon":"iconfont ym-custom ym-custom-phone-classic","F_UrlAddress":"/pages/apply/apply/lims020202/index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学事件","F_Icon":"iconfont ym-custom ym-custom-flag","F_UrlAddress":"/pages/apply/apply/lims020202/2index"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				/* 机构 */
				if(userid=="2001"){
				  jsonArrStr=jsonArrStr+'[{"F_FullName":"机构资料","F_Icon":"iconfont icon-ym icon-ym-header-userInfo","F_UrlAddress":"/pages/users/account/register-info/register-company"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"人员资料","F_Icon":"iconfont ym-custom ym-custom-wunderlist","F_UrlAddress":"/pages/apply/apply/lims020103/7index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"课程资料","F_Icon":"iconfont ym-custom ym-custom-wunderlist","F_UrlAddress":"/pages/apply/apply/lims020103/index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学评价","F_Icon":"iconfont icon-ym icon-ym-generator-nature","F_UrlAddress":"/pages/apply/apply/lims020202/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学投诉","F_Icon":"iconfont ym-custom ym-custom-phone-classic","F_UrlAddress":"/pages/apply/apply/lims020202/index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学事件","F_Icon":"iconfont ym-custom ym-custom-flag","F_UrlAddress":"/pages/apply/apply/lims020202/2index"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				/* 基地 */
				if(userid=="3001"){
				  jsonArrStr=jsonArrStr+'[{"F_FullName":"基地资料","F_Icon":"iconfont icon-ym icon-ym-header-userInfo","F_UrlAddress":"/pages/users/account/register-info/register-base"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"课程资料","F_Icon":"iconfont ym-custom ym-custom-wunderlist","F_UrlAddress":"/pages/apply/apply/lims020103/2index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学评价","F_Icon":"iconfont icon-ym icon-ym-generator-nature","F_UrlAddress":"/pages/apply/apply/lims020202/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学投诉","F_Icon":"iconfont ym-custom ym-custom-phone-classic","F_UrlAddress":"/pages/apply/apply/lims020202/index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学事件","F_Icon":"iconfont ym-custom ym-custom-flag","F_UrlAddress":"/pages/apply/apply/lims020202/2index"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				/* 学校 */
				if(userid=="4001"){
				  jsonArrStr=jsonArrStr+'[{"F_FullName":"学校资料","F_Icon":"iconfont icon-ym icon-ym-header-userInfo","F_UrlAddress":"/pages/users/account/register-info/register-school"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学课程","F_Icon":"iconfont icon-ym icon-ym-header-message1","F_UrlAddress":"/pages/apply/apply/lims020103/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学评价","F_Icon":"iconfont icon-ym icon-ym-generator-nature","F_UrlAddress":"/pages/apply/apply/lims020202/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学投诉","F_Icon":"iconfont ym-custom ym-custom-phone-classic","F_UrlAddress":"/pages/apply/apply/lims020202/index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学事件","F_Icon":"iconfont ym-custom ym-custom-flag","F_UrlAddress":"/pages/apply/apply/lims020202/2index"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				/* 老师 */
				if(userid=="5001"){
				  jsonArrStr=jsonArrStr+'[{"F_FullName":"个人资料","F_Icon":"iconfont icon-ym icon-ym-header-userInfo","F_UrlAddress":"/pages/users/account/register-info/register-info"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学课程","F_Icon":"iconfont icon-ym icon-ym-header-message1","F_UrlAddress":"/pages/apply/apply/lims020103/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学风采","F_Icon":"iconfont icon-ym-yingyongjieshao","F_UrlAddress":"/pages/apply/apply/lims020103/4index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学评价","F_Icon":"iconfont icon-ym icon-ym-generator-nature","F_UrlAddress":"/pages/apply/apply/lims020202/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学投诉","F_Icon":"iconfont ym-custom ym-custom-phone-classic","F_UrlAddress":"/pages/apply/apply/lims020202/index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学事件","F_Icon":"iconfont ym-custom ym-custom-flag","F_UrlAddress":"/pages/apply/apply/lims020202/2index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"学生画像","F_Icon":"iconfont icon-ym icon-ym-generator-rate","F_UrlAddress":"/pages/apply/apply/lims020103/5index"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				/* 学生 */
				if(userid=="6001"){
				  jsonArrStr=jsonArrStr+'[{"F_FullName":"个人资料","F_Icon":"iconfont icon-ym icon-ym-header-userInfo","F_UrlAddress":"/pages/users/account/register-info/register-stu"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学足迹","F_Icon":"iconfont ym-custom ym-custom-wunderlist","F_UrlAddress":"/pages/apply/apply/lims020103/4index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学评价","F_Icon":"iconfont icon-ym icon-ym-generator-nature","F_UrlAddress":"/pages/apply/apply/lims020202/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学投诉","F_Icon":"iconfont ym-custom ym-custom-phone-classic","F_UrlAddress":"/pages/apply/apply/lims020202/index"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				/* 家长 */
				if(userid=="7001"){
				  jsonArrStr=jsonArrStr+'[{"F_FullName":"个人资料","F_Icon":"iconfont icon-ym icon-ym-header-userInfo","F_UrlAddress":"/pages/users/account/register-info/register-home"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学报名","F_Icon":"iconfont icon-ym icon-ym-header-message1","F_UrlAddress":"/pages/apply/apply/lims020103/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学足迹","F_Icon":"iconfont ym-custom ym-custom-wunderlist","F_UrlAddress":"/pages/apply/apply/lims020103/4index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学评价","F_Icon":"iconfont icon-ym icon-ym-generator-nature","F_UrlAddress":"/pages/apply/apply/lims020202/3index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学投诉","F_Icon":"iconfont ym-custom ym-custom-phone-classic","F_UrlAddress":"/pages/apply/apply/lims020202/index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"研学事件","F_Icon":"iconfont ym-custom ym-custom-flag","F_UrlAddress":"/pages/apply/apply/lims020202/2index"}';
				  jsonArrStr=jsonArrStr+',{"F_FullName":"孩子画像","F_Icon":"iconfont icon-ym icon-ym-generator-rate","F_UrlAddress":"/pages/apply/apply/lims020103/5index"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				//console.log(jsonArrStr);
				
				var jsonArr = JSON.parse(jsonArrStr);//将字符串 转为 json对象 数组 JSON.parse要求 json格式 严格
				console.log(jsonArr);
				
				return jsonArr;
			},
			
			/* 点击跳转 */
			deRoute(e) {
				console.log(e)
				uni.setStorage({
					key:"title",
					data:e
				})
				setTimeout(function () {
					uni.navigateTo({
						url:e.F_UrlAddress,
						success: function(res) {
						   
						},
						fail: (err) => {
							helper.msg("暂无此页面")
						}
						
					})
					uni.hideLoading();
					/* 清除汇报页缓存 */
					uni.removeStorageSync('TabCur3')
				}, 300);
				
			},
			
			
			defaultlogout() {
				uni.showModal({
					// title: '提示',
					content: '确定退出当前账号吗？',
					success: (res) => {
						uni.reLaunch({
							url: '/pages/users/sign-in/sign-in',
						});
					},
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: '../correlation/about-us/about-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			contactUs() {
				uni.navigateTo({
					url: '../correlation/contact-us/contact-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// #ifdef APP-PLUS
			accountSecurity() {
				uni.navigateTo({
					url: '../correlation/account-security/account-security',
				})
			},
			// #endif
			/* 扫码事件 */
			scanning(){
				uni.scanCode({
				    onlyFromCamera: false,/* 是否只能从相机扫码，不允许从相册选择图片 */
				    success: function (res) {
				        console.log('条码内容：' + res.result);
						
				    }
				});
			},
			replaceAvatar() {
				console.log(1)
			},
		  },
		
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F3
	}

	.back-banner {
		position: relative;
		background-position: top;
		// background-size: 100% 25%;
	}

	.header {
		background-color: #3281ff;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		
		&.status {
			padding-top: var(--status-bar-height);
		}

		width:100%;
		padding: 160rpx 2.5% 0;
		box-sizing: border-box;
		height:368upx;
		margin-bottom: -90upx;

		.userinfo {
			width: 90%;
			display: flex;
			.face {
				flex-shrink: 0;
				width: 16vw;
				height: 16vw;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				align-items: center;
				flex-direction: column;
				// margin-left: 23upx;

				.username {
					width: 100%;
					font-size: 36rpx;
					font-weight: bolder;
					font-weight: normal;
					color: #FFFFFF;
				}

				.usernike {
					display: flex;
					align-items: center;
					height: 40upx;
					font-size: 28rpx;
					color: #FFFFFF;
					border-radius: 20upx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			color: #9A9A9A;
		}
	}

	.hover {
		background-color: #eee
	}
	
	.userinfo_center{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
	}
	.userstaff {
		width: 95%;
		margin: 20rpx auto 0;
		border-radius: 20rpx;
		overflow: hidden;

		.staff {
			width: 100%;
			height: 96rpx;
			display: flex;
			background-color: #fff;
			align-items: center;

			.staffinfo {
				width: 91%;
				height: 100%;
				font-size: 28rpx;
				display: flex;
				vertical-align: hiddle;
				margin-left: 30rpx;
				align-items: center;
				justify-content: space-between;

				.staffname {
					width: 30%;
					display: flex;
					// flex-flow: wrap;
					white-space: nowrap;
					align-items: center;
					color: #3A3A3A;
					font-size: 32rpx;

					// font-weight: bolder;
					& .iconfont {
						color: #3281ff;
						width: 52rpx;
						font-size: 38rpx;
						text-align: center;
						font-weight: normal;
						margin-right: 10rpx;
					}
				}

				.iconfont {
					color: #9A9A9A;
					width: auto;
				}

				.postname {
					width: 75%;
					flex-shrink: 0;
					// height: 6vw;
					text-align: right;
					color: #9A9A9A;
				}
			}
		}
	}

	.formgroup {
		padding-left: 40upx;
	}

	.controlvalue {
		width: 68% !important;
	}

	.btnlogout {
		color: #FF0000;
		background-color: #fff;
		border: 0;
		font-weight: 600
	}

	button::after {
		border: none;
	}

	.exit-btn {
		width: 95%;
		height: 90rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1rpx solid #eee;

		.btn-exit {
			height: 100%;
			line-height: 90rpx;
			font-size: 32rpx;
			color: #3281ff;
			background: #fff;
			text-align: center;

		}
	}

	.popup-box {
		background-color: #fff;
		width: 554upx;
		height: 800upx;
		border-radius: 10upx;
		padding: 34upx 56upx 0;
		box-sizing: border-box;

		.us-info {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 70upx;
			margin-bottom: 10upx;

			.face {
				height: 60upx;
				width: 60upx;
				border-radius: 50%;
				margin-right: 28upx;
			}

			.info {

				.username,
				.usernike {
					line-height: 35upx;
				}

				.username {
					color: #252B3A;
					font-size: 28upx;
				}

				.usernike {
					color: #666666;
					font-size: 24upx;
				}
			}

		}

		.qrimg {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 10upx;
		}

		.popup-btn {
			margin-bottom: 32upx;
			background-color: #fff;
			color: #3281FF;
			border: 1upx solid #3281FF;
			box-sizing: border-box;

			&.btn-save {
				background-color: #3281FF;
				color: #fff;
			}
		}
	}
</style>
